<template>
  <div>
    <a-card size="small">
      <!-- 按钮 -->
      <a-row class="yy-Row">
        <a-col :span="4">
          <a-space>
            <a-button type="primary" v-has="'btn_ProductConfig_query'" @click="queryProductNameList">{{$t('menu.query')}}
            </a-button>
            <a-button type="primary" v-has="'btn_ProductConfig_save'" @click="saveProdInfo">{{$t('btn.save')}}
            </a-button>
            <a-popconfirm
                :title="$t('menuItem.confirmDel')"
                :okText="$t('menuItem.confirm')"
                :cancelText="$t('menuItem.cancel')"
                @confirm="() =>deleteData()"
            >
              <a-button type="danger" v-has="'btn_ProductConfig_delete'">{{$t('btn.delete')}}
              </a-button>
            </a-popconfirm>
            <a-button type="primary" v-has="'btn_ProductConfig_upload'" @click="uploadFile">{{$t('btn.upload')}}
            </a-button>
            <a-button type="primary" v-has="'btn_ProductConfig_clear'" @click="cleanAll">{{$t('btn.cleanAll')}}
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-row class="yy-Row">
        <a-row>
          <a-col  :span="4">
            <a-form-model
                    layout="inline"
                    :labelCol="{span: 7}"
                    :wrapperCol="{span: 17}"
                    ref="capForm"
                    :model="capForm"
            >
              <a-row>
                  <a-form-model-item :label="$t('menuItem.ProductId')" >
                    <a-input
                            v-model="queryForm.productId"
                            allowClear
                            :placeholder="$t('menuItem.prodIdWarn')"
                    />
                  </a-form-model-item>
              </a-row>
            </a-form-model>
          </a-col>
        </a-row>

    </a-row>
      <!-- 查询条件 -->
      <a-card>
       <a-card-grid :hoverable="false" style="width: 20%;height: calc(100vh - 200px);overflow: auto;padding:5px 12px">

         <a-row>
           <a-col :span="3">
             <a-tree
                     v-model="checkedKeysList"
                     :selected-keys="selectedKeys"
                     :tree-data="treeData"
                     @expand="onExpand"
                     @select="onSelect"
                     defaultExpandAll
             />
           </a-col>
         </a-row>
       </a-card-grid>
        <a-card-grid :hoverable="false"   style="width: 80%;height: calc(100vh - 200px);overflow: auto;padding: 12px">
          <a-row>
            <a-form-model
                layout="inline"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                ref="capForm"
                :model="capForm"
                :rules="productRules"
            >
              <a-row>
                <a-col :span="10">
                  <a-form-model-item :label="$t('menuItem.ProductId')" :model="capForm" prop="productName">
                    <a-input
                        v-model="capForm.productName"
                        allowClear
                        autocomplete="off"
                        :placeholder="$t('menuItem.prodIdWarn')"
                        :disabled="productDisabled"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="10">
                  <a-form-model-item :label="$t('menuItem.AQLStanard')" >
                    <a-select
                        v-model="capForm.aqlStandard"
                        show-search
                        allowClear
                    >
                      <a-select-option v-for="item in aqlList" :key="item.value">
                        {{ item.desc }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="10">
                  <a-form-model-item :label="$t('menuItem.InspectionDie')" >
                    <a-input
                        disabled
                        v-model="capForm.inspectionDie"
                        allowClear
                    />
                  </a-form-model-item>
                </a-col>

                <a-col :span="10">
                  <a-form-model-item :label="$t('menuItem.GrossDie')" >
                    <a-input
                        v-model="capForm.grossDie"
                        allowClear
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="10">
                  <a-form-model-item :label="$t('menuItem.KlarfFile')">

                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </a-row>

          <a-row >
            <a-col :span="16" :offset="4">
              <a-config-provider  :render-empty="()=>'暂无数据'">
                <a-table
                        :columns="columns"
                        :dataSource="dataSource"
                        :loading="loadTable"
                        :customRow="customRow"
                        bordered
                        size="small"
                        :rowKey="(record,index)=>{return index}"
                        :pagination="false"
                >
                  <template slot="action" slot-scope="text, record" v-if="!record.isEmpty">
                    <div>
                  <span>
                    <a-button type="primary" size="small" v-has="'btn_ProductConfig_downLoad'" @click="downloadFile">{{$t('btn.download')}}</a-button>&nbsp;


                    <a-popconfirm
                        :title="$t('menuItem.confirmDel')"
                        :okText="$t('menuItem.confirm')"
                        :cancelText="$t('menuItem.cancel')"
                        @confirm="() =>deleteFile()"
                    >
                      <a-button type="primary" size="small" v-has="'btn_ProductConfig_deleteFile'">
                        {{$t('btn.delete')}}
                      </a-button>
                    </a-popconfirm>

                  </span>
                    </div>
                  </template>
                </a-table>
              </a-config-provider>

            </a-col>
          </a-row>
          <a-row style="margin-top: 5px">
            <ProMap
                ref="ProMap"
                :mapData="mapData"/>
          </a-row>
        </a-card-grid>
      </a-card>
    </a-card>
    <!-- 上传文件弹窗   -->
    <a-modal centered
             width="35%"
             :visible="uploadVisible"
             :title="$t('menuItem.UploadKlarf')"
             :okText="$t('menuItem.confirm')"
             :cancelText="$t('menuItem.cancel')"
             @ok="confirmImprtData"
             @cancel="uploadCancel">
      <a-row class="yy-Row">
        <!-- 查询条件 -->
        <a-form-model
            layout="inline"
            :model="queryForm"
            :labelCol="{span: 6}"
            :wrapperCol="{span: 18}"
        >
          <a-row class="yy-Row">
            <a-col :span="24">
              <a-form-model-item :label="$t('menuItem.UploadKlarf')" >
                <a-upload
                    :multiple="false"
                    :action="uploadUrl"
                    :headers="headers"
                    @change="uploadKlarfChange"
                    name = "file"
                    :file-list = "file"
                >
<!--                  name = "file"-->
                  <a-button type="primary">{{$t('menuItem.ChoiceKlarf')}}</a-button>
                </a-upload>
                <p class="ant-upload-text">
                  {{$t('menuItem.UploadKlarfWarn')}}
                </p>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import {mapMutations, mapState} from "vuex";
import ProMap from './ProMap.vue'
import {message} from "ant-design-vue";
import i18n from "@/i18n";
export default {
  name: "ProductConfig",
  components: {
    ProMap,
  },
  data() {
    return {
      file:[],
      fileList:[],
      uploadVisible: false,
      productRules: {
        productName: [
            {required: true, message: this.$i18n.tc('menuItem.prodIdWarn') , trigger: ['change']}
        ],
      },
      columns: [
        {
          title: this.$t('menuItem.KlarfFileName'),
          dataIndex: "klarfFileName",
          key: "klarfFileName",
          align: 'center'
        },
        {
          title: this.$t('menuItem.UserTableOperation'),
          dataIndex: 'action',
          key: 'action',
          align: 'center',
          scopedSlots: {customRender: 'action'},
        },
      ],
      labelCol: {span: 12},
      wrapperCol: {span: 12},
      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
      headers: {
        'token': window.localStorage.getItem('access_token')
      },
    }
  },
  computed: {
    ...mapState('ProductConfig', ['queryForm', 'productDisabled','dataSource', 'loadTable', 'capForm','productNameList','treeData', 'selectedKeys', 'checkedKeys','mapData','aqlList']),
    // 分配权限弹框选中值
    checkedKeysList: {
      get() {
        return this.checkedKeys
      },
      set(val) {
        this.setCheckedKeys(val)
      }
    },
  },
  methods: {
    ...mapMutations('ProductConfig', ['queryProductNameList', 'queryProductInfo', 'cleanAll', 'saveProductNameInfo', 'deleteData', 'setSelectedKeys'
      , 'setCheckedKeys', 'setExpandedKeys', 'downloadFile', 'customRow', 'deleteFile','queryAqlStanrdList']),
    // 下拉框搜索
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    uploadUrl() {
      return process.env.VUE_APP_BASEURL + '/productConfig/upload/uploadKlarf?productName=' + this.capForm.productName + "&userName=" + window.localStorage.getItem("userIdMes")
          + "&aqlStandard=" + this.capForm.aqlStandard + "&grossDie=" + this.capForm.grossDie;
    },
    uploadKlarf(info) {
      let file = info[0]
      if (file.status == 'done') {
        if (file.response.code == '200') {
          this.uploadVisible = false
          this.file = [];
          this.queryProductNameList();
          this.queryProductInfo();
          this.$message.success(file.response.message);
        } else {
          this.uploadVisible = false
          this.queryProductNameList();
          this.queryProductInfo();
          this.$message.warn(file.response.message);
        }
      }
    },
    uploadCancel() {
      this.file = [];
      this.uploadVisible = false
    },
    uploadFile() {
      if (!this.capForm.productName) {
        this.$message.warn(this.$i18n.tc('menuItem.prodIdWarn'))
        return
      }
      this.uploadVisible = true
    },
    confirmImprtData() {
      this.uploadVisible = false
      if(this.file.length === 0){
        this.$message.warn("No klarf file selected");
        return
      }
      this.uploadKlarf(this.file);
    },
    uploadKlarfChange({file, fileList}) {
      fileList = fileList.slice(-1);
      this.file = fileList;
      if (file.status === 'done'){
        let response = file.response
        if (response.code === '200'){
          this.$message.success(response.message);
        }else{
          this.$message.warn(response.message);
        }
      }
    },
    // 树节点展开
    onExpand(expandedKeys) {
      this.setExpandedKeys(expandedKeys);
    },
    // 树节点选中
    onSelect(selectedKeys, info) {
      this.setSelectedKeys(selectedKeys);
      this.queryProductInfo(selectedKeys);
    },

    // save
    saveProdInfo() {
      this.$refs.capForm.validate(valid => {
        if (valid) {
          this.saveProductNameInfo()
        }
      })
    },

    // 设置选中行
    customRowTest(record, index) {
      return {
        on: {
          click: () => {
            this.customRow(record)
          }
        }
      }
    },
  },
  mounted() {
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          this.windowHeight = window.fullHeight;
        })();
      };
      this.queryProductNameList();
      this.queryAqlStanrdList()
  },
}
</script>

<style scoped>
.yy-Row {
  margin-bottom: 1rem;
}
</style>
